<div [class.show-overlay]="showMaskLayer && isCover" class="user-guide-mask-layer"></div>
<div [class.show-overlay]="showNormalOverlay && isCover" class="user-guide-normal-overlay"></div>

<div [class.show-overlay]="showTopOverlay && isCover" class="user-guide-top-overlay" (click)="disableClick($event)"></div>
<div [class.show-overlay]="showBottomOverlay && isCover" class="user-guide-bottom-overlay" (click)="disableClick($event)"></div>
<div [class.show-overlay]="showLeftOverlay && isCover" class="user-guide-left-overlay" (click)="disableClick($event)"></div>
<div [class.show-overlay]="showRightOverlay && isCover" class="user-guide-right-overlay" (click)="disableClick($event)"></div>

<div [class.show-overlay]="showBorder && isCover" class="user-guide-active-shadow" (click)="disableClick($event)"></div>

<div class="user-guide-panel">
  <div
    *ngIf="!isCover && (stepsLength !== 1 || curStepType !== 'tip') && curStepType !== 'display'"
    class="devui-user-guide-panel-arrow"
    [style.background-color]="extraConfig?.panelBackground"
  ></div>
  <div
    *ngIf="stepsLength !== 1 || curStepType !== 'tip'"
    id="devui-user-guide"
    class="user-guide-panel-multiple"
    [style.background]="extraConfig?.panelBackground"
  >
    <div class="user-guide-panel-multiple-header">
      <d-icon class="user-guide-panel-close" [icon]="closeTemplate" [operable]="true" (click)="exit()"> </d-icon>
    </div>
    <div class="user-guide-panel-multiple-body" [style.maxWidth.px]="maxContentWidth">
      <div *ngIf="title" class="user-guide-panel-title" [style.color]="extraConfig?.infoColor">
        <div class="user-guide-panel-title-index">
          <svg
            width="24px"
            height="24px"
            viewBox="0 0 24 24"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <defs>
              <linearGradient x1="39.5307261%" y1="4.02342885%" x2="62.2425974%" y2="95.9765712%" id="star-linearGradient-1">
                <stop stop-color="#FFDC42" offset="0%"></stop>
                <stop stop-color="#FAA631" offset="100%"></stop>
              </linearGradient>
              <linearGradient x1="50.4447351%" y1="9.89598169%" x2="50.4447351%" y2="100%" id="star-linearGradient-2">
                <stop stop-color="#FFFDF5" offset="0%"></stop>
                <stop stop-color="#FFE46C" offset="45.8568177%"></stop>
                <stop stop-color="#FFE46C" offset="77.1796784%"></stop>
                <stop stop-color="#FFB84C" offset="100%"></stop>
              </linearGradient>
              <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="star-linearGradient-3">
                <stop stop-color="#FDD461" offset="0%"></stop>
                <stop stop-color="#FAA932" offset="100%"></stop>
              </linearGradient>
              <linearGradient x1="49.9999995%" y1="100%" x2="49.9999995%" y2="6.6099008%" id="star-linearGradient-4">
                <stop stop-color="#FFCB7E" offset="0%"></stop>
                <stop stop-color="#FFA60C" offset="31.1380841%"></stop>
                <stop stop-color="#FFDA65" offset="64.2551587%"></stop>
                <stop stop-color="#F8E7B3" offset="100%"></stop>
              </linearGradient>
            </defs>
            <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="星星">
                <rect id="矩形" opacity="0.848224019" x="0" y="0" width="24" height="24" rx="1.5"></rect>
                <g id="编组-30" transform="translate(1.500000, 0.750000)">
                  <path
                    d="M10.2849545,0.00312821355 C9.01530446,0.0801671154 7.93648512,1.57985131 6.82414587,4.47008186 L6.68705842,4.83270968 L6.25577388,4.89811591 L5.72946472,4.9840674 L5.22697862,5.07265412 L4.74822094,5.16405115 L4.29309704,5.25843358 C1.78084521,5.80205672 0.4023952,6.4979103 0.0802523031,7.48936419 L0.0527435764,7.58351023 C-0.223764928,8.64745912 0.589252054,9.94431065 2.43691735,11.6231017 L2.79546598,11.9423873 L3.1781838,12.2708429 L3.66780035,12.6765484 L3.53907311,13.3293274 L3.44799898,13.829093 L3.36780146,14.3082434 C3.34289719,14.4645382 3.3198289,14.6174178 3.29861979,14.7669031 L3.24059321,15.2051965 C2.95237883,17.5600309 3.17664519,18.9963886 4.01764407,19.60741 L4.09594063,19.6608172 C4.99328277,20.2344195 6.41801766,19.867408 8.49419949,18.6398756 L8.87889319,18.4072233 C8.94421443,18.3668735 9.01014077,18.325738 9.07667568,18.2838189 L9.4832155,18.0229203 L9.90452651,17.7433245 L10.3925423,17.409 L10.6636031,17.592728 L11.0861157,17.8731527 L11.4939736,18.1359757 L11.8873453,18.3811025 C11.9517094,18.420477 12.015477,18.4591102 12.0786514,18.4970002 L12.4506094,18.7154052 C12.6330581,18.8201324 12.8102323,18.9181349 12.9822267,19.0093594 L13.3193373,19.1827553 C14.9155955,19.9770028 16.0337342,20.1345728 16.7593115,19.60741 L16.8322112,19.5509531 C17.4404328,19.0494252 17.6883676,18.0458603 17.6249485,16.4915 L17.603775,16.1078533 L17.5707959,15.7029063 C17.5449079,15.4258082 17.5112498,15.1344101 17.4700218,14.8285121 L17.4025276,14.3587654 C17.3903407,14.2786535 17.377687,14.1976291 17.3645695,14.1156891 L17.2803251,13.613037 L17.1851018,13.0882608 L17.1057681,12.6812903 L17.1896115,12.6144018 C17.3293157,12.5014059 17.4650241,12.3899369 17.5967223,12.2799601 L17.9797719,11.9544721 L18.3386732,11.6377301 C20.2460636,9.91931968 21.0537817,8.58833879 20.6967032,7.48936419 L20.663964,7.39795277 C20.3400348,6.57159251 19.3245511,5.9514404 17.5893825,5.46113493 L17.1761707,5.35025772 C17.0341664,5.31404381 16.8878908,5.27856346 16.7373311,5.24378192 L16.2727869,5.14149897 C16.1136462,5.10808029 15.9502086,5.07532566 15.7824614,5.04320033 L15.2662775,4.94867745 L14.7241587,4.85772181 L14.5451229,4.82932258 L14.4696753,4.66957886 C12.9812146,1.55985477 11.7071674,-7.32747196e-14 10.3884778,-7.32747196e-14 L10.2849545,0.00312821355 Z"
                    id="路径"
                    fill="url(#star-linearGradient-1)"
                    fill-rule="nonzero"
                  ></path>
                  <path
                    d="M10.3884778,1.35483871 C10.698933,1.35483871 11.1473381,1.73828119 11.6929355,2.50673715 L11.8684127,2.76220752 C11.8981815,2.80691957 11.9282076,2.85269859 11.9584852,2.89954482 L12.1431199,3.1934305 L12.333503,3.51294013 L12.5293494,3.85808471 L12.7303739,4.22887523 L12.9362911,4.62532267 L13.1468159,5.04743805 C13.1822715,5.11993022 13.2179072,5.19349234 13.2537171,5.26812464 L13.4706185,5.72876252 L13.6241243,6.06080357 L13.9859608,6.11455876 C14.1641422,6.14102976 14.3380531,6.16803704 14.5076775,6.19553742 L15.0036752,6.27947467 L15.4738587,6.36611146 C15.5500662,6.38076149 15.625194,6.3955132 15.6992403,6.41036121 L16.1305234,6.50056152 C16.2002355,6.51577309 16.2688621,6.53107015 16.3364011,6.54644731 L16.7285692,6.63962823 L17.0945412,6.73447239 C17.2121552,6.76633553 17.3253874,6.7984327 17.4342217,6.83072071 L17.7475153,6.92811413 C18.7477431,7.25437947 19.3065985,7.59541179 19.4081751,7.90803238 C19.4934424,8.17045841 19.2883637,8.62751564 18.7797589,9.24774919 L18.5989641,9.46049412 C18.4389036,9.64274596 18.2553099,9.83731888 18.0479004,10.0435387 L17.7875595,10.2965499 L17.5042469,10.5604832 C17.4551078,10.6053678 17.4050071,10.6506968 17.3539424,10.6964647 L17.0359691,10.9762958 L16.6947531,11.2664018 L16.3301858,11.5665238 C16.2674726,11.6173645 16.203782,11.6686116 16.1391116,11.72026 L15.6136198,12.1349914 L15.697482,12.5445924 C16.08423,14.433552 16.2763848,15.9111437 16.2763848,16.9661037 C16.2763848,17.8761079 16.1311295,18.3891382 15.9629573,18.5113225 C15.8300053,18.6079177 15.5616817,18.601431 15.1681121,18.486175 L14.9776083,18.425236 L14.7695393,18.3487262 C14.6611504,18.3065578 14.5462574,18.2585039 14.424985,18.2044944 L14.1739709,18.0885141 L13.9061659,17.956528 L13.6217912,17.8084121 L13.321068,17.644042 L13.0042177,17.4632934 L12.4991875,17.1611893 L12.142987,16.938951 L11.7714335,16.6998995 L11.3847483,16.4439104 L10.9831526,16.1708594 L10.3859552,15.7553852 L9.99736535,16.0311488 C9.81569992,16.1600681 9.63812068,16.2841165 9.46464912,16.4032906 L8.95657891,16.7461861 C7.88255303,17.4574274 6.98298347,17.9625763 6.26376755,18.2606573 C5.46502915,18.5916966 4.97946103,18.6315382 4.81399828,18.5113225 C4.62937748,18.3771876 4.47932656,17.8617864 4.47932656,16.9506689 C4.47932656,16.269409 4.56255815,15.4131874 4.72973741,14.3851273 L4.82925578,13.8073442 C4.88318197,13.5099505 4.94336188,13.1998176 5.00981004,12.877009 L5.16574773,12.1400686 L4.83794663,11.8788974 C4.50171066,11.6110058 4.18930468,11.3532121 3.90081117,11.1057047 L3.48601555,10.7421818 C2.82461448,10.1492467 2.31292405,9.62119004 1.952233,9.16095683 C1.46234724,8.53587427 1.30403179,8.10730838 1.36878049,7.90803238 C1.43601883,7.70109403 1.89806718,7.38372936 2.79109438,7.07213055 C3.75858961,6.73454804 5.14367806,6.43046355 6.93848028,6.16463381 L7.68453956,6.05800922 L7.82258087,5.6732626 C7.9090951,5.43213148 7.9950492,5.20119982 8.08026573,4.98044224 L8.24966276,4.55248498 C8.36186839,4.27621374 8.47255245,4.01799966 8.5812943,3.77778255 L8.74289786,3.43094709 L8.90127264,3.11106196 C8.92738184,3.05999112 8.95334337,3.01004133 8.97915065,2.96121166 L9.13209074,2.68166738 C9.63537056,1.79460735 10.0716926,1.35483871 10.3884778,1.35483871 Z"
                    id="路径"
                    fill="url(#star-linearGradient-2)"
                  ></path>
                  <path
                    d="M18,0.5625 C17.0680195,0.5625 16.3125,1.31801948 16.3125,2.25 C16.3125,3.18198052 17.0680195,3.9375 18,3.9375 C18.9319805,3.9375 19.6875,3.18198052 19.6875,2.25 C19.6875,1.31801948 18.9319805,0.5625 18,0.5625 Z"
                    id="路径"
                    fill="url(#star-linearGradient-3)"
                    fill-rule="nonzero"
                  ></path>
                  <path
                    d="M18,0.9375 C18.7248737,0.9375 19.3125,1.52512627 19.3125,2.25 C19.3125,2.97487373 18.7248737,3.5625 18,3.5625 C17.2751263,3.5625 16.6875,2.97487373 16.6875,2.25 C16.6875,1.52512627 17.2751263,0.9375 18,0.9375 Z"
                    id="路径"
                    fill="url(#star-linearGradient-4)"
                    fill-rule="nonzero"
                  ></path>
                  <path
                    d="M10.5,19.3125 C9.56801948,19.3125 8.8125,20.0680195 8.8125,21 C8.8125,21.9319805 9.56801948,22.6875 10.5,22.6875 C11.4319805,22.6875 12.1875,21.9319805 12.1875,21 C12.1875,20.0680195 11.4319805,19.3125 10.5,19.3125 Z"
                    id="路径"
                    fill="url(#star-linearGradient-3)"
                    fill-rule="nonzero"
                  ></path>
                  <path
                    d="M10.5,19.6875 C11.2248737,19.6875 11.8125,20.2751263 11.8125,21 C11.8125,21.7248737 11.2248737,22.3125 10.5,22.3125 C9.77512627,22.3125 9.1875,21.7248737 9.1875,21 C9.1875,20.2751263 9.77512627,19.6875 10.5,19.6875 Z"
                    id="路径"
                    fill="url(#star-linearGradient-4)"
                    fill-rule="nonzero"
                  ></path>
                  <path
                    d="M3,0.5625 C2.06801948,0.5625 1.3125,1.31801948 1.3125,2.25 C1.3125,3.18198052 2.06801948,3.9375 3,3.9375 C3.93198052,3.9375 4.6875,3.18198052 4.6875,2.25 C4.6875,1.31801948 3.93198052,0.5625 3,0.5625 Z"
                    id="路径"
                    fill="url(#star-linearGradient-3)"
                    fill-rule="nonzero"
                  ></path>
                  <path
                    d="M3,0.9375 C3.72487373,0.9375 4.3125,1.52512627 4.3125,2.25 C4.3125,2.97487373 3.72487373,3.5625 3,3.5625 C2.27512627,3.5625 1.6875,2.97487373 1.6875,2.25 C1.6875,1.52512627 2.27512627,0.9375 3,0.9375 Z"
                    id="路径"
                    fill="url(#star-linearGradient-4)"
                    fill-rule="nonzero"
                  ></path>
                </g>
              </g>
            </g>
          </svg>
        </div>
        {{ title }}
      </div>
      <div *ngIf="content" class="user-guide-panel-content" [style.color]="extraConfig?.infoColor">
        <div *ngIf="!isTemplateContent()" [innerHTML]="content | safe: 'html'"></div>
        <ng-container *ngIf="isTemplateContent()">
          <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
        </ng-container>
      </div>
      <div *ngIf="showOperateZone" class="operate-zone">
        <p><i class="icon icon-info-o" style="color: rgb(81, 112, 255); padding-right: 4px"></i>{{ i18nCommonText.autoFill }}</p>
      </div>
    </div>
    <div class="user-guide-panel-multiple-footer" [class.user-guide-panel-multiple-footer-only-dot]="!showButtons">
      <div class="user-guide-panel-multiple-footer-left">
        <ul class="devui-carousel-dots" *ngIf="stepsLength > 1 && showDots">
          <li
            class="dot-item"
            [ngClass]="{ active: currentStep === index }"
            [style.background]="currentStep === index ? extraConfig?.operationColor : extraConfig?.dotColor"
            *ngFor="let item of items; let index = index"
            (click)="switchStep(index)"
          ></li>
        </ul>
      </div>
      <div *ngIf="showButtons" class="user-guide-panel-multiple-footer-right">
        <d-button bsStyle="common" [disabled]="!canPrev" *ngIf="showPrevButton" (btnClick)="prev()">{{ i18nCommonText.prev }}</d-button>
        <d-button *ngIf="!canFinish" [disabled]="!canNext" [bsStyle]="nextButtonType" (btnClick)="next()">{{
          i18nCommonText.next
        }}</d-button>
        <d-button
          *ngIf="currentStep === stepsLength - 1 && canFinish"
          [bsStyle]="nextButtonType"
          [disabled]="!canFinish"
          (btnClick)="exit()"
          >{{ i18nCommonText.finish }}</d-button
        >
      </div>
    </div>
  </div>

  <div *ngIf="stepsLength === 1 && curStepType === 'tip'">
    <div *ngIf="curStepType === 'tip'" class="devui-user-guide-panel-arrow"></div>
    <div [class.user-guide-panel-tip]="curStepType === 'tip'" [class.user-guide-panel-single]="curStepType !== 'tip'">
      {{ title }}
      <div *ngIf="content" class="user-guide-panel-content" [innerHTML]="content | safe: 'html'"></div>
      <button type="button" class="close" aria-label="Close" (click)="exit()">
        <svg class="svg-icon-close" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 12 12" version="1.1">
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g transform="translate(-2.000000, -2.000000)" fill-rule="nonzero">
              <polygon
                points="8 6.58578644 12.2426407 2.34314575 13.6568542 3.75735931 9.41421356 8 13.6568542 12.2426407 12.2426407 13.6568542 8 9.41421356 3.75735931 13.6568542 2.34314575 12.2426407 6.58578644 8 2.34314575 3.75735931 3.75735931 2.34314575"
              />
            </g>
          </g>
        </svg>
      </button>
    </div>
  </div>
</div>
<ng-template #closeTemplate>
  <svg
    width="16px"
    height="16px"
    viewBox="0 0 16 16"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <path
        d="M14.6887175,1.25368865 C15.0770801,1.64205125 15.0121881,2.34244569 14.544513,2.81012074 L9.383,7.971 L14.544513,13.1322854 C14.9787827,13.5665551 15.0657548,14.2014859 14.7650189,14.6009195 L14.6887175,14.6887175 C14.3003549,15.0770801 13.5999604,15.0121881 13.1322854,14.544513 L13.1322854,14.544513 L7.971,9.383 L2.81012075,14.544513 C2.3424457,15.0121881 1.64205125,15.0770801 1.25368865,14.6887175 C0.865326051,14.3003549 0.930218063,13.5999605 1.39789313,13.1322854 L6.558,7.971 L1.39789311,2.81012074 C0.963623424,2.37585105 0.876651354,1.74092026 1.17738727,1.34148668 L1.25368865,1.25368865 C1.64205125,0.865326051 2.34244569,0.930218063 2.81012074,1.39789311 L2.81012074,1.39789311 L7.971,6.558 L13.1322854,1.39789311 C13.5999605,0.930218063 14.3003549,0.865326051 14.6887175,1.25368865 Z"
        id="形状结合"
        fill="#8A8E99"
        fill-rule="nonzero"
      ></path>
    </g>
  </svg>
</ng-template>
